<script setup></script>

<template>
  <header>
    <nav class="navbar">
      <RouterLink to="/" class="nav-link">主页</RouterLink>
      <RouterLink to="/blog-create" class="nav-link">新建</RouterLink>
    </nav>
  </header>

  <RouterView />
</template>

<style scoped>
  .navbar {
    background-color: #e8f5e9; /* 浅绿色背景 */
    padding: 10px 20px;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .nav-link {
    color: #2e7d32; /* 深绿色文字，与浅绿色背景对比 */
    text-decoration: none; /* 移除默认下划线 */
    font-size: 1.1rem; /* 稍微增大字体 */
    font-weight: 500; /* 字体加粗，增强可读性 */
    padding: 8px 16px; /* 链接内间距 */
    border-radius: 4px; /* 轻微圆角 */
    margin-right: 20px; /* 增加每个链接之间的水平间距 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }

  .nav-link:hover {
    background-color: #f5f5f5;
    color: #4a148c;
    text-decoration: underline;
  }

  /* 活动状态（当前页面） */
  .nav-link.router-link-active {
    background-color: #c5e1a5; /* 更浅的绿色背景，表示活动状态 */
    color: #1b5e20; /* 强调颜色 */
    font-weight: 600; /* 更粗的字体 */
  }
</style>
